<template>
  <div class="car-rental-system">
    <header class="header">
          <el-menu :default-active="activeIndex"  mode="horizontal" @select="handleSelect" class="center-menu" style="background:  #66b1ff;">
            <el-menu-item  :style="{ backgroundColor: 'rgb(105,176,250)' }" style="color: white !important;font-size: 30px">汽车租赁</el-menu-item>
            <el-menu-item @click="openIndex('/shouye')"  :style="{ backgroundColor: 'rgb(105,176,250)' }" class="item1" style="color: white !important;margin-left: 100px;">首页</el-menu-item>
            <el-menu-item @click="openIndex('/zuche')" :style="{ backgroundColor: 'rgb(105,176,250)'} " style="color: white !important;">租车服务</el-menu-item>
            <el-menu-item @click="openIndex('/carList')" :style="{ backgroundColor: 'rgb(105,176,250)' }" style="color: white !important;">车圈</el-menu-item>
            <el-menu-item @click="openIndex('/orders')" :style="{ backgroundColor: 'rgb(105,176,250)' }" style="color: white !important;">我的订单</el-menu-item>
            <div style="margin-left: 93%" >
              <el-dropdown>
<!--                <el-avatar icon="el-icon-user-solid" style="margin-top: 10px"></el-avatar>-->
                <div class="avatar-wrapper">
                  <img :src="require('@/assets/images/user.png')" style="width: 40px;height: 40px;margin-top: 10px">
                  <i class="el-icon-caret-bottom" />
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="goToCommentsPage()">个人中心</el-dropdown-item>
                  <el-dropdown-item divided @click.native="logout">
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-menu>
    </header>

    <div class="carousel-container">
      <el-carousel
        height="300px"
        width="300px"
        indicator-position="outside"
        :type="'card'"
        :interval="2000"
      >
        <el-carousel-item v-for="(item, index) in banners" :key="index" :class="{'center-item': index === 1}">
          <img :src="item" class="banner-image" alt="banner">
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="recommended-cars">
      <h2  style="justify-content:center;margin-left: 45% ">热门车型推荐</h2>
      <el-row :gutter="20" class="car-list">
        <el-col
          v-for="car in cars"
          :key="car.id"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="4"
          class="car-col"
        >
          <el-card class="car-item">
            <img :src="baseURL+car.vehicleImageUrl" class="car-image" style="width: 130%;height: 130px;margin-left: -18%;margin-top: -18%" alt="Car Image" />
            <h3 class="car-name">{{ car.vehicleName }}</h3>
            <p class="car-price">¥{{ car.vehiclePrice }}<span class="unit">/小时</span></p>
            <el-button
              type="primary"
              class="book-btn"
              @click="bookCar(car.vehicleId)"
            >
              立即预订
            </el-button>
          </el-card>
        </el-col>
      </el-row>
      <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
        <UserProfile />
      </el-dialog>

      <el-dialog :title="'预定信息'" :visible.sync="clopen" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="车辆名称" prop="vehicleName">
            <el-input disabled v-model="form.vehicleName" placeholder="请输入车辆名称" />
          </el-form-item>
          <el-form-item label="租赁价格(/天)" prop="vehiclePrice" label-width="100px">
            <el-input disabled v-model="form.vehiclePrice" placeholder="请输入租赁价格" />
          </el-form-item>
          <el-form-item label="车辆类型" prop="vehicleType">
            <el-select disabled clearable v-model="form.vehicleType" placeholder="请选择车辆类型">
              <el-option label="经济型" value="0">经济型</el-option>
              <el-option label="豪华型" value="1">豪华型</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车辆图片" prop="vehicleImageUrl">
            <img :src="baseURL+form.vehicleImageUrl"  style="width: 150px;height: 150px;"  />
          </el-form-item>

          <el-form-item label="取车时间" prop="createdAt">
            <el-date-picker clearable
                            v-model="form.pickupDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择取车时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="租车天数" prop="createdAt" >
            <el-input  v-model="form.rentalDuration" @input="zuche()" type="text">
            </el-input>
          </el-form-item>
          <el-form-item label="租车总价" prop="createdAt">
            <el-input disabled v-model="form.totalAmount" type="text">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { listRentals, getRentals, delRentals, addRentals, updateRentals } from "@/api/system/rentals";
import { getToken } from '@/utils/auth'
import  UserProfile  from '@/views/system/user/profile/yhindex'
import {addOrders, updateOrders} from "@/api/system/orders";
export default {
  components: {
    UserProfile
  },
  data() {
    return {
      form: {},
      activeIndex: '1',
      baseURL:process.env.VUE_APP_BASE_API,
      open: false,
      clopen: false,
      title: '用户信息',
      banners: [
        require('@/assets/carousel/rental_carousel1.jpg'),
        require('@/assets/carousel/rental_carousel2.jpg'),
        require('@/assets/carousel/rental_carousel3.jpg'),
        require('@/assets/carousel/rental_carousel3.jpg'),
      ],
      cars: [
        { id: 1, name: '福特', price: 150, image: require('@/assets/car_info/ad.jpg') },
        { id: 2, name: '日产', price: 120, image: require('@/assets/car_info/bc.jpg') },
        { id: 3, name: '本田', price: 150, image: require('@/assets/car_info/bk.jpg')},
        { id: 4, name: '大众', price: 180, image: require('@/assets/car_info/bm.jpg') },
        { id: 5, name: '别克', price: 200, image: require('@/assets/car_info/bsj.jpg') },
        { id: 6, name: '宝马', price: 300, image: require('@/assets/car_info/rc.jpg') },
      ]
    };
  },created() {
    if (!getToken()) {
      location.href = '/index'
    }
    this.getList()
  },
  methods: {
    /** 查询车辆租赁信息列表 */
    getList() {
      this.loading = true;
      listRentals(this.queryParams).then(response => {
        this.cars = response.rows.slice(0, 6);
      });
    },
    handleSelect(key) {
      console.log(key);
    },
    zuche() {
      this.form.totalAmount = this.form.vehiclePrice * this.form.rentalDuration;
    },
    bookCar(carId) {
      this.reset();
      const vehicleId = carId
      getRentals(vehicleId).then(response => {
        this.form = response.data;
        this.clopen = true;
        this.title = "车辆信息";
      });
    },
    // 表单重置
    reset() {
      this.form = {
        vehicleId: null,
        pickupDate: null,
        vehicleName: null,
        vehicleType: null,
        vehiclePrice: null,
        vehicleStatus: null,
        vehicleImageUrl: null,
        createdAt: null,
        totalAmount: null,
        rentalDuration: null,
        updatedAt: null
      };
      this.resetForm("form");
    },
    goToCommentsPage() {
      // 处理预订逻辑
      this.open=true
    },
    openIndex(index) {
      // 处理预订逻辑
     location.href=index
    },
    logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index'
        })
      }).catch(() => {})
    },
    submitForm(){
      if (!this.form.pickupDate){
        return this.$modal.msgError("请选择取车日期");
      }
      if (!this.form.rentalDuration){
        return this.$modal.msgError("请输入租车天数");
      }
      this.$refs["form"].validate(valid => {
        this.form.rentalPrice=this.form.vehiclePrice
            addOrders(this.form).then(response => {
              this.$modal.msgSuccess("预定成功");
              this.clopen = false;
              this.getList();
            });
      });

    },
    cancel(){
      this.clopen=false
    }
  },
};
</script>

<style scoped>
.car-rental-system {
  text-align: center;
}

.header {
  background: #409EFF; /* 修改为浅蓝色 */
  box-shadow: 0 2px 12px rgba(189, 93, 93, 0.1);
  padding: 0 20px;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 80px; /* 增加导航栏高度 */
  position: relative;
}

::v-deep .el-menu-item{
  background-color: #1ab394;
}
.main-nav {
  align-items: center;
  width: 70%;
}

.main-nav .el-menu-item:hover,
.main-nav .el-menu-item.is-active {
  background-color: inherit !important; /* 确保悬停和点击时背景色不变 */
  color: black !important; /* 悬停和点击时文字颜色改为黑色 */
}

.main-nav .el-menu-item {
  color: white !important; /* 默认文字颜色为白色 */
}

.el-dropdown span {
  color: white !important; /* 确保用户信息文字颜色为白色 */
}

.el-dropdown span:hover {
  background-color: yellow !important; /* 鼠标悬停时背景色改为黄色 */
}

.el-menu-item {
  background-color: inherit !important; /* 确保默认背景色不变 */
  color: white !important; /* 确保文字颜色为白色 */
}

.item1:hover {
  background-color: #1ab394 !important; /* 鼠标悬停时背景色改为#1ab394 */
}

.carousel-container {
  position: relative;
  margin: 20px 0;
  overflow: visible;
  margin-bottom: 60px;
}

.el-carousel-item {
  background-color: #f5f7fa;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #fff;
}

.section-title {
  text-align: center;
  font-size: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.car-col {
  margin-bottom: 20px;
}

.car-item {
  transition: transform 0.3s;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.car-item:hover {
  transform: translateY(-5px);
}

.car-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 4px;
}

.car-name {
  font-size: 18px;
  margin: 15px 0;
}

.car-price {
  color: #f56c6c;
  font-size: 24px;
  margin: 10px 0;
}

.unit {
  font-size: 14px;
  color: #999;
}

.book-btn {
  width: 100%;
  margin-top: 15px;
}

/* 调整指示器位置 */
.el-carousel__indicators {
  bottom: -40px !important;
}

/* 自定义箭头样式 */
.el-carousel__arrow {
  position: absolute;
  bottom: -25px;
  top: auto !important;
  transform: none !important;
  background: none;
  color: #409EFF;
  font-size: 24px;
  z-index: 2;
  display: block !important;
}

.el-carousel__arrow--left {
  left: 40%;
}

.el-carousel__arrow--right {
  right: 40%;
}

/* 调整箭头hover效果 */
.el-carousel__arrow:hover {
  background: none;
  color: #66b1ff;
}

.el-carousel--card .el-carousel__item {
  width: 50%;
  opacity: 0.7;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  z-index: 1; /* 默认层级 */
  transform: scale(0.9); /* 调整缩放比例，确保图片完整显示 */
}

.el-carousel--card .el-carousel__item.center-item {
  width: 60%;
  opacity: 1;
  z-index: 3; /* 主显示层级最高 */
  transform: scale(1.1);
}

.el-carousel--card .el-carousel__item:not(.center-item) {
  z-index: 1; /* 左右两侧层级较低 */
  transform: scale(0.9); /* 调整缩放比例，确保图片完整显示 */
}
</style
